{%- comment -%}只有Desktop layout的值为Image on top时，Desktop image height和Mobile image height配置才生效{%- endcomment -%}
{%- comment -%}当Desktop layout的值为Image on left时，随着屏幕宽度小于订阅弹窗宽度且大于移动端断点，图片左右裁切，高度不变{%- endcomment -%}

{%- liquid
  if section.settings.desktop_image != nil or section.settings.mobile_image != nil
    assign show_image = true
    if section.settings.desktop_layout == 'image_on_top'
      assign modal_class = 'newsletter-modal-vertical'
    else
      assign modal_class = 'newsletter-modal-horizontal'
    endif
  else
    assign show_image = false
  endif

  if section.settings.desktop_layout == 'image_on_top' and show_image
    assign enable_vertical_layout = true
  else
    assign enable_vertical_layout = false
  endif

  if section.settings.heading != blank or section.settings.text != blank or section.settings.show_email_form
    assign is_show_form_wrap = true
  else
    assign is_show_form_wrap = false
  endif


  assign show_modal = true
  case request.page_type
    when 'customers/login'
      assign show_modal = false
    when 'customers/register'
      assign show_modal = false
    when 'customers/account'
      assign show_modal = false
    when 'customers/order'
      assign show_modal = false
    when 'customers/addresses'
      assign show_modal = false
    when 'customers/reset_password'
      assign show_modal = false
    when '404'
      assign show_modal = false
    when 'search'
      assign show_modal = false
    when 'cart'
      assign show_modal = false
  endcase

  case request.path
    when '/products/all'
      assign show_modal = false
    when '/products'
      assign show_modal = false
    when '/collections/all'
      assign show_modal = false
    when '/collections'
      assign show_modal = false
  endcase


  if show_modal
    for block in section.blocks
      if request.path == block.settings.hide_newsletter_popup_for
        assign show_modal = false
      endif 
    endfor
  endif
-%}

{% if section.settings.show_newsletter_popup and show_modal %}
<div class="as-newsletter-modal newsletter-modal modal fade {{ modal_class }}" id="subscribe_popup" data-interval="{{ section.settings.delay_until_the_popup_appears | times: 1000 }}"  tabindex="-1" aria-labelledby="newsletterModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0">
      <button type="button" class="btn p-0 as-close btn-close btn-modal-close icon-wrap-md" data-bs-dismiss="modal" aria-label="Close">
        {% render 'icon-close-circle' %}
      </button>
      <div class="modal-body p-0">
        {%- if show_image -%}
          <div class="modal-img">
            {%- if section.settings.desktop_layout == 'image_on_top' -%}
              {%- liquid
                assign desktop_img_ratio_percentage = ''
                case section.settings.desktop_image_height
                  when 'large'
                    assign desktop_img_ratio_percentage = 'calc(1 / 3 * 100%)'
                  when 'medium'
                    assign desktop_img_ratio_percentage = 'calc(1 / 2 * 100%)'
                  when 'small'
                    assign desktop_img_ratio_percentage = 'calc(2 / 3 * 100%)'
                endcase
              -%}
              <div class="ratio d-none d-md-block" style="--se-aspect-ratio: {{ desktop_img_ratio_percentage }};">
                {%- if section.settings.desktop_image != nil -%}
                  {{ section.settings.desktop_image | image_url: width: 1440 | image_tag: loading: 'lazy', class: 'w-100 object-fit-cover modal-img-top', sizes: '(min-width: 768px) 480px' }}
                {%- else -%}
                  {{ 'image' | placeholder_svg_tag: 'placeholder-svg w-100 h-100 modal-img-top bg-gray-200' }}
                {%- endif -%}
              </div>
            {%- else -%}
              {%- liquid
                if section.settings.desktop_image != nil
                  assign desktop_img_ratio_percentage = 1 | divided_by: section.settings.desktop_image.aspect_ratio | times: 100 | append: '%'
                else
                  assign desktop_img_ratio_percentage = '100%'
                endif
              -%}
              <div class="crop-img-wrap ratio d-none d-md-block" style="--se-aspect-ratio: {{ desktop_img_ratio_percentage }};">
                {%- if section.settings.desktop_image != nil -%}
                  {{ section.settings.desktop_image | image_url: width: 1440 | image_tag: loading: 'lazy', class: 'object-fit-cover', sizes: '(min-width: 768px) 480px' }}
                {%- else -%}
                  {{ 'image' | placeholder_svg_tag: 'placeholder-svg w-100 h-100 bg-gray-200' }}
                {%- endif -%}
              </div>
            {%- endif -%}

            {%- liquid
              assign mobile_img_ratio_percentage = ''
              case section.settings.mobile_image_height
                when 'large'
                  assign mobile_img_ratio_percentage = 'calc(1 / 2 * 100%)'
                when 'medium'
                  assign mobile_img_ratio_percentage = 'calc(2 / 3 * 100%)'
                when 'small'
                  assign mobile_img_ratio_percentage = 'calc(3 / 4 * 100%)'
              endcase
            -%}
            <div class="ratio d-block d-md-none" style="--se-aspect-ratio: {{ mobile_img_ratio_percentage }};">
              {%- if section.settings.mobile_image != nil -%}
                {{ section.settings.mobile_image | image_url: width: 1440 | image_tag: loading: 'lazy', class: 'w-100 object-fit-cover modal-img-top', sizes: '(min-width: 576px) 480px, calc(100vw - 48px)' }}
              {%- else -%}
                {{ 'image' | placeholder_svg_tag: 'placeholder-svg w-100 h-100 modal-img-top bg-gray-200' }}
              {%- endif -%}
            </div>
          </div>
        {%- endif -%}
        <div class="modal-inner-content">
          {% if is_show_form_wrap %}
            <div class="newsletter-modal-wrap as-newsletter-modal-wrap position-relative">
              <div class="success-wrap">
                <div class="sucess-content absolute-center d-flex justify-content-center align-items-center">
                  <div class="text-center text-success">
                    <div class="icon-wrap-xl mb-3">
                      {% render 'icon-check-circle' %}
                    </div>
                    <div>{{ 'general.subscribe.success_message' | t }}</div>
                  </div>
                </div>
              </div>
              <div class="form-wrap">
                    {% if section.settings.heading != blank %}
                      <h2 class="h3 mb-1 text-center">{{ section.settings.heading }}</h2>
                    {% endif %}
                    {% if section.settings.text != blank %}
                      <div class="mb-0 text-center gray-700 no-last-margin richtext-with-link">{{ section.settings.text }}</div>
                    {% endif %}
                    {% if section.settings.show_email_form %} 
                      <div class="{% if show_image %}mt-3 mt-md-4{% else %}mt-4{% endif %}">
                        {% assign api = settings.subscribe_api %}
                        {% form 'customer', id: 'modal-contact_form', data-action: api, data-customize: true, class: 'as-newsletter-form as-validate-form newsletter-form', novalidate: 'novalidate', autocomplete: "off" %}
                          <div class="position-relative">
                            <div class="">
                              <div class="{% if enable_vertical_layout %}d-flex{% endif %}">
                                <div class="form-pristine{% if enable_vertical_layout %} flex-grow-1 me-1{% endif %}">
                                  <input
                                    data-pristine-required-message="{{ 'general.subscribe.email_error_message' | t }}"
                                    data-pristine-email-message="{{ 'general.subscribe.email_error_message' | t }}"
                                    type="email"
                                    {% if api != blank %} name="email" {% else %} name="contact[email]"  {% endif %}
                                    class="form-control input-pristine"
                                    value="{{ form.email }}"
                                    aria-required="true"
                                    autocorrect="off"
                                    autocapitalize="off"
                                    autocomplete="email"
                                    placeholder="{{ 'general.subscribe.placeholder' | t }}"
                                    required
                                  >
                                </div>
                                {%- if enable_vertical_layout -%}
                                <div class="d-none d-md-block">
                                  <button type="submit" class="btn btn-primary"> 
                                    <span class="as-spinner visually-hidden spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                    {{ 'general.subscribe.submit' | t }}
                                  </button>
                                </div>
                                {%- endif -%}
                              </div>
                              {% if settings.enable_gdpr_policy_checkbox %}
                                <div class="form-pristine mt-2">
                                  <div class="form-check input-pristine">
                                    <input
                                    data-pristine-required-message="{{ 'general.subscribe.policy_error_message' | t }}"
                                    class="form-check-input" type="checkbox" name="check" id="flexCheckChecked" required>
                                    <label class="form-check-label fs-footnote gray-600" for="flexCheckChecked">
                                      {{ 'general.subscribe.accept_policy_html' | t }}
                                    </label>
                                  </div>
                                </div>
                              {% endif %}
                              <div class="d-grid mt-3 {% if enable_vertical_layout %}d-md-none{% endif %}">
                                <button type="submit" class="btn btn-primary">
                                  <span class="as-spinner visually-hidden spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                  {{ 'general.subscribe.submit' | t }}
                                </button>
                              </div>
                              <div class="text-danger as-error-tips d-none">{{ 'general.subscribe.error_message' | t }}</div>
                            </div>
                          </div>
                        {% endform %}
                      </div>
                    {% endif %}
              </div>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

{% endif %}

{%- if section.settings.show_newsletter_popup and section.settings.enable_side_button -%}
  {%- assign subscribe_modal_id = '#subscribe_popup' -%}
  {%- assign icon_position = section.settings.side_button_position | replace: '_', '-' -%}
  <div class="as-subscribe-popup position-fixed subscribe-popup {{ icon_position }}">
    <a {% render 'link', link: subscribe_modal_id %}
      href="{{ subscribe_modal_id }}"
      class="btn btn-primary border-0 subscribe-popup-icon">
      {%- if section.settings.image_of_side_button != nil -%}
        {{ section.settings.image_of_side_button | image_url: width: 48 | image_tag: loading: 'lazy', class: 'img object-fit-cover', srcset: nil }}
      {%- else -%}
        {% render 'icon-email' %}
      {%- endif -%}
    </a>
  </div>
{%- endif -%}

{% schema %}
{
  "name": "Newsletter popup",
  "tag": "section",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_newsletter_popup",
      "label": "Show newsletter popup",
      "default": false
    },
    {
      "type": "range",
      "id": "delay_until_the_popup_appears",
      "min": 10, 
      "max": 60,
      "step": 10,
      "default": 30,
      "unit": "s",
      "label": "Delay until the popup appears"
    },
    {
      "type": "select",
      "id": "desktop_layout",
      "label": "Desktop layout",
      "options": [
        {
          "value": "image_on_top",
          "label": "Image on top"
        },
        {
          "value": "image_on_left",
          "label": "Image on left"
        }
      ],
      "info": "Image on top is the default mobile layout.",
      "default": "image_on_top"
    },
    {
      "label": "Desktop image",
      "type": "image_picker",
      "id": "desktop_image"
    },
    {
      "label": "Mobile image",
      "type": "image_picker",
      "id": "mobile_image"
    },
    {
      "type": "select",
      "id": "desktop_image_height",
      "label": "Desktop image height",
      "info": "Effective when image on top is selected.",
      "options": [
        {
          "value": "large",
          "label": "3:1"
        },
        {
          "value": "medium",
          "label": "2:1"
        },
        {
          "value": "small",
          "label": "3:2"
        }
      ],
      "default": "small"
    },
    {
      "type": "select",
      "id": "mobile_image_height",
      "label": "Mobile image height",
      "options": [
        {
          "value": "large",
          "label": "2:1"
        },
        {
          "value": "medium",
          "label": "3:2"
        },
        {
          "value": "small",
          "label": "4:3"
        }
      ],
      "default": "medium"
    },
    {
      "type": "text",
      "id": "heading",
      "default": "Subscribe to our emails",
      "label": "Heading"
    },
    {
      "type": "richtext",
      "id": "text",
      "default": "<p>Be the first to know about new collections and exclusive offers.</p>",
      "label": "Text"
    },
    {
      "type": "checkbox",
      "id": "show_email_form",
      "label": "Show email form",
      "default": true
    },
    {
      "type": "header",
      "content": "Newsletter popup icon"
    },
    {
      "type": "checkbox",
      "id": "enable_side_button",
      "label": "Enable side button",
      "default": false
    },
    {
      "type": "select",
      "id": "side_button_position",
      "label": "Side button position",
      "options": [
        {
          "value": "middle_left",
          "label": "Middle left"
        },
        {
          "value": "middle_right",
          "label": "Middle right"
        },
        {
          "value": "bottom_left",
          "label": "Bottom left"
        },
        {
          "value": "bottom_right",
          "label": "Bottom right"
        }
      ],
      "default": "middle_right"
    },
    {
      "label": "Image of side button",
      "type": "image_picker",
      "id": "image_of_side_button"
    }
  ],
  "blocks": [
    {
      "type": "hide_popup",
      "name": "Hide popup",
      "settings": [
        {
          "type": "url",
          "id": "hide_newsletter_popup_for",
          "label": "When selected, the page will not show newsletter popup."
        }
      ]
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "hide_popup"
      }
    ]
  }
}
{% endschema %}
